<template>
    <view>
        <view class="heading">
            <image class="heading-icon1"  @tap="navigateBack" src="../../static/icon/detail/back.png"></image>
            <image class="heading-icon2"  @tap="gotoVR" src="../../static/icon/detail/vr.png"></image>
            <image class="heading-icon3" @tap="link" src="../../static/icon/detail/share.png"></image>
        </view>
        <view class="bodying">
            <view class="uni-flex uni-column">
                <view class="swiper">
                    <view class="uni-margin-wrap">
                        <uni-swiper-dot :photo="photo" field="content">
                            <swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="500" :indicator-dots='true'>
								<swiper-item v-for="(item, index) in photo" :key="index + item.content">
									 <view class="swiper-item">
                                        <image class="image" :src="item.photoLocation" mode="aspectFill" />
                                    </view>
								</swiper-item>
                            </swiper>
                        </uni-swiper-dot>
                    </view>
                </view>
                <view class="part-one">
                    <view class="sellheading">{{houseInfo.sellHeading}}</view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-tow">
                    <view class="uni-flex uni-row">
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two" v-text="houseInfo.sellPrice+'万'"></text>
                            <text class="property-two">售价</text>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two">{{houseInfo.houseArea}}m²</text>
                            <text class="property-two">面积</text>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two">{{houseInfo.houseBedroomnum}}室{{houseInfo.houseLivingnum}}厅</text>
                            <text class="property-two">房型</text>
                        </view>
                    </view>
                    <view class="cut-off-rule"></view>
                    <view class="uni-flex uni-row">
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two">{{(houseInfo.sellPrice*10000/houseInfo.houseArea).toFixed(0)}}元/m²</text>
                            <text class="property-two">单价</text>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two">{{houseInfo.houseFloor}}</text>
                            <text class="property-two">楼层</text>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two">{{houseInfo.houseWedge}}</text>
                            <text class="property-two">楼型</text>
                        </view>
                    </view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-three">
                    <view class="uni-flex uni-row">
                        <view class="flex-item uni-flex uni-column">
                            <view v-if="houseInfo.sellNew == 1">
                                <image class="icon" src="../../static/icon/detail/check.png"></image>
                                <text class="property-three">新房</text>
                            </view>
                            <view v-else>
                                <image class="icon-none" src="../../static/icon/detail/check.png"></image>
                                <text class="property-three-none">新房</text>
                            </view>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <view v-if="houseInfo.houseElevator == 1">
                                <image class="icon" src="../../static/icon/detail/elevator.png"></image>
                                <text class="property-three">电梯</text>
                            </view>
                            <view v-else>
                                <image class="icon-none" src="../../static/icon/detail/elevator.png"></image>
                                <text class="property-three-none">电梯</text>
                            </view>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <view v-if="houseInfo.houseFitment == '精装'">
                                <image class="icon" src="../../static/icon/detail/fitment.png"></image>
                                <text class="property-three">精装</text>
                            </view>
                            <view v-else>
                                <image class="icon-none" src="../../static/icon/detail/fitment.png"></image> 
                                <text class="property-three-none">精装</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-four">
                    <view class="detailspage">房源详情</view>
                    <view class="uni-flex uni-column">
                        <view class="uni-flex uni-row">
                            <text class="property-four">详细地址:</text>
                            <text class="information-four" v-text="houseInfo.houseDetailaddress"></text>
                        </view>
                        <view class="uni-flex uni-row">
                            <text class="property-four">房屋楼型:</text>
                            <text class="information-four" v-text="houseInfo.houseWedge"></text>
                        </view>
                        <view class="uni-flex uni-row">
                            <text class="property-four">建房时间:</text>
                            <text class="information-four" v-text="getdate(houseInfo.houseCreattime)"></text>
                        </view>
                    </view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-five">
                    <view class="detailspage">其他介绍</view>
                    <view class="header-cont">
                        <view class = "nav" catchtouchmove="true">
                            <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">房源卖点</view>
                            <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">户型介绍</view>
                            <view :class="navIndex==3?'activite':''" @click="checkIndex(3)">税费解析</view>
                            <view :class="navIndex==4?'activite':''" @click="checkIndex(4)">周边配套</view>
                            <view :class="navIndex==5?'activite':''" @click="checkIndex(5)">交通出行</view>
                            <view :class="navIndex==6?'activite':''" @click="checkIndex(6)">房屋备注</view>
                        </view>
                    </view>
                    <view class="body">
                        <view class="content" v-if="navIndex==1" v-text="houseInfo.houseSellpoint"></view>
						<view class="content" v-if="navIndex==2" v-text="houseInfo.houseHtype"></view>
						<view class="content" v-if="navIndex==3" v-text="houseInfo.houseTax"></view>
						<view class="content" v-if="navIndex==4" v-text="houseInfo.houseBside"></view>
						<view class="content" v-if="navIndex==5" v-text="houseInfo.hosueTraffic"></view>
						<view class="content" v-if="navIndex==6" v-text="houseInfo.hosueRemark"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="uni-flex uni-row">
               <view v-if="status == 1">
                   <view class="concern"  @tap="noconcern">
                       <view class="uni-flex uni-column">
                           <image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/已关注.png"></image>
                           <text class="foottext">已关注</text>
                       </view>
                   </view>
               </view>
               <view v-else-if="status == 0">
                   <view class="concern"  @click="addConcern">
                       <view class="uni-flex uni-column">
                           <image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/fabulous.png"></image>
                           <text class="foottext">关注</text>
                       </view>
                   </view>
               </view>
                <view class="comment">
                    <!-- <view class="uni-flex uni-column">
                        <image class="footicon" src="../../static/icon/detail/comment.png"></image>
                        <text class="foottext">微聊</text>
                    </view> -->
					<view class="uni-flex uni-column" @click="link">
						<button class="foottext1">微聊</button>
					</view>
                </view>
				<view>
				    <uni-calendar 
				    ref="calendar"
				    :insert="false"
				    @confirm="confirm"
				     ></uni-calendar>
				     <button class="seehouse" @click="open">预约看房</button>
				</view>
                <!-- <button class="seehouse" @tap="link">预约看房</button> -->
                <!-- <button class="form" @tap="link">发起订单</button> -->
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
    data (){
        return {
            userId: 1,
			houseId: 4,
			timestamp:'',
			navIndex:1,
			status: -1,
            photo: [{
                colorClass: 'uni-bg-white',
                photoLocation: '../../static/facephoto/1.jpg',
                content: '内容 A'
                },
                {
                colorClass: 'uni-bg-white',
                photoLocation: '../../static/facephoto/2.jpg',
                content: '内容 B'
            },{
                colorClass: 'uni-bg-white',
                photoLocation: '../../static/facephoto/3.jpg',
                content: '内容 B'
            },{
                colorClass: 'uni-bg-white',
                photoLocation: '../../static/facephoto/4.jpg',
                content: '内容 B'
            }],
            houseInfo: {
            },
        }
    },    
	onLoad(option) {
        this.houseId = option.id
		this.getHouseById()

        this.getIsConcern()
    },
    methods: {
		...mapActions(['setCurrentChatFrame']),
		link() {
			if (this.user.userId == this.houseInfo.userId) {
				let options = {
				    msg: '该房源是您自己的！',
				    duration: 500
				}
				this.$refs.toast.showTips(options)
				return
			}
			this.$axios.post('hp/addFriend', this.qs.stringify({
				userId: this.user.userId,
				friendId: this.houseInfo.userId
			}))
			.then(res => {
				console.log(res.data)
				this.setCurrentChatFrame({
				    chatId: this.houseInfo.userId,
				    chatObjectPhoto: res.data.friendPhoto,
				    nickname: res.data.nickname,
				    isFriend: 1,
				    blackList: 0,
				    userPhoto: res.data.userPhoto
				})
				uni.navigateTo({
					url: '/pages/news/chatFrame'
				})
			})
			.catch(err => {
				console.log(err)
			})
		},
        navigateBack(){
            uni.navigateBack();
        },
        getdate() {
        var now = new Date(this.houseInfo.houseCreattime),
            y = now.getFullYear(),
            m = now.getMonth() + 1,
            d = now.getDate();
        // return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
        },
        checkIndex(index){
            this.navIndex = index;
        },
        navigateBack(){
            uni.navigateBack();
        },
        gotoVR(){
			if(this.houseInfo.VR == 0)
            uni.showToast({
                title:'本房源暂无VR功能',
                icon:'none',
                duration:2000
            })
            else{
                uni.navigateTo({
                    url:"../common/vr"
                })
            }
        },
		getHouseById(){
		    let data = {houseId: this.houseId}
		    this.$axios.post('getHouseById',this.qs.stringify(data))
		    .then(res => {
		        this.houseInfo = res.data.houses
				this.getSellById()
		    })
		},
		getSellById(){
			let data = {houseId: this.houseId}
			this.$axios.post('getAllSellsByHouseId',this.qs.stringify(data))
			.then(res => {
			    this.sell = res.data.allSells[0]
				this.houseInfo.sellHeading = this.sell.sellHeading
				this.houseInfo.sellPrice = this.sell.sellPrice
				this.houseInfo.sellNew = this.sell.sellNew
				this.$forceUpdate()
			})
		},
        getIsConcern() {
            let data = {userId: this.user.userId , houseId: this.houseId}
            this.$axios.post('isConcern',this.qs.stringify(data))
            .then(res => {
                this.concern = res.data.concern
                this.status = res.data.concern.length > 0 ? 1 : 0
            })
        },
		noconcern() {
		    this.$axios.post('delConcern', this.qs.stringify({
		    	houseId: this.houseId,
		    	userId: this.user.userId
		    }))
		    .then(res => {
		    	this.status = 0
		    })
		    .catch(err => {
		    	console.log(err)
		    })
		},
		addConcern() {
			console.log(this.houseId)
			console.log(this.user.userId)
		    this.$axios.post('addConcern', this.qs.stringify({
				houseId: this.houseId,
				userId: this.user.userId,
				concernType: 1
			}))
			.then(res => {
				this.status = 1
			})
			.catch(err => {
				console.log(err)
			})
		},
		open() {
			this.$refs.calendar.open();
		},
		confirm(e) {
			var nowtime = new Date().getTime();
			console.log(this.houseInfo);
			console.log(e);
			var apply = {
		
			}
			console.log(apply)
			this.$axios.post('AddSeeHouseApplication?', this.qs.stringify({
					houseId: parseInt(this.houseId),
					seehouseapplicationTime: nowtime,
					seehouseapplicationCreattime: nowtime,
					seehouseapplicationState: 0,
					seehouseapplicationApplyerid: this.userId,
					agentId: 2,
					seehouseapplicationHousestate: 0,
				}))
				.then((res) => {
					console.log(res.data)
				})
				.catch(err => {
					console.log(err)
				})
			// console.log('houseId:'+this.houseId+'  applyId'+this.userId+'  nowtime'+nowtime);
		}
    },

    computed: {
        ...mapState(['user'])
    }
}
</script>

<style>
    .heading{
        top: 0;
        position: fixed;
        height: 100rpx;
        width: 100%;
        background-color: rgb(255, 255, 255, 0);
        z-index: 1;
    }
    
    .heading-icon1{
        height: 80rpx;
        width: 80rpx;
        padding: 10rpx 5rpx 0rpx 0rpx;
    }

    .heading-icon2{
        height: 80rpx;
        width: 80rpx;
        padding: 10rpx 5rpx 0rpx 440rpx;
    }

    .heading-icon3{
        height: 80rpx;
        width: 80rpx;
        padding: 10rpx 5rpx 0rpx 50rpx;
    }

    .bodying{
        position: relative;
        overflow: hidden;
        margin-bottom: 150rpx; 
    }

    .detailspage{
        font-size:50rpx;
        margin: 20rpx 0rpx 10rpx 50rpx;
    }

    .swiper_img{
        height:500rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:60rpx;
    }
    .swiper-box{
        height:500rpx;
        width:100%;
    }
    .image{
        width: 100%;
        height:500rpx;
    }
    
    .footer{
        position: fixed;
        bottom: 0;
        overflow: hidden;
        height: 150rpx;
        width: 100%;
        background-color: rgb(255, 255, 255);
        text-align: center;
        text-decoration: underline;
        font-weight: 400;
        text-decoration: none;
    }

    .footicon{
        height: 80rpx;
        width: 80rpx;
        padding: 10rpx 30rpx;
    }

    .foottext{
        font-size: 60%;
    }
    .foottext1{
    	background-color:  rgb(245, 45, 5);
    	color: white;
    	font-size: 20px;
    	height: 100rpx;
    	width: 260rpx;
    	margin: auto;
    	text-align: center;
    	font-weight: bold;
    	margin-left: 20rpx;
    	margin-top: 20rpx;
    	margin-right: 20rpx;
    }
    .seehouse{
       background-color: rgb(218, 174, 54);
       color: white;
       font-size: 20px;
       height: 100rpx;
       width: 260rpx;
       margin: auto;
       text-align: center;
       font-weight: bold;
       margin-top: 20rpx;
    }

    .form{
        background-color: rgb(245, 73, 30);
        color: white;
        font-size:20px;
        height: 100rpx;
        width: 230rpx;
        margin: auto;
        text-align: center;
        font-weight: bold;
    }

    .sellheading{
        font-size: 50rpx;
        color: rgb(0, 0, 0);
        padding: 50rpx 50rpx 0rpx;
        font-weight: bold
    }

    .cut-off-rule{
        height: 1rpx;
        width: 90%;
        background-color: rgb(184, 184, 184);
        margin: 40rpx 5%;
    }

    .flex-item {
		width: 33.3%;
		text-align: center;
	}

    .information-two{
        font-size:40rpx;
        color: rgb(206, 43, 43);
    }

    .property-two{
        font-size: 30rpx;
        color: rgb(190, 190, 190);
    }

    .icon{
        height: 80rpx;
        width: 80rpx;
        margin: 0rpx 90rpx;
    }

    .icon-none{
        height: 80rpx;
        width: 80rpx;
        margin: 0rpx 90rpx;
        opacity: 0.3;
    }

    .property-three{
        font-size: 30rpx;
        color: black;
    }

    .property-three-none{
        font-size: 30rpx;
        color: rgb(168, 167, 167);
    }

     .property-four{
        font-size: 30rpx;
        margin: 10rpx 0rpx 10rpx 50rpx;
    }

    .information-four{
        font-size: 30rpx;
        margin: 10rpx;
    }

	.nav{
    width: 90%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 25rpx;
	}

	.activite{
		font-weight: bold;
		border-bottom: 6rpx solid #0065d9;
	}
	
	.nav>view{
		padding-bottom: 10rpx;
	}

	.box{
		background: #008000;
	}

	.body{
		overflow-y: scroll;
        height: 200rpx;
        width: 90%;
        background-color: rgb(255, 255, 255);
        margin: auto;
        border-style:solid;
	    border-width:1px;
        border-color: rgb(179, 179, 179);
        border-radius: 10rpx;
	}

	.container {
	width: 100%;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	} 

</style>